<template>
    <transition name="fade">
        <div class="vlonChooseImage" v-if="showChooseImgWrapper" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">

            <div class="box">

                <div class="head">
                    <div class="left">{{ pageTitle }}</div>
                    <div class="right">
                        <el-button type="default" class="close" @click="closeThisWindow">
                            <i class="el-icon-close"></i>
                        </el-button>
                    </div>
                </div>

                <div class="headNav">
                    <div class="list">
                        <div class="li" v-for="(nl, index) in nav.list" :key="nl.id" :class="nl.active" @click="chooseThisNavItem(nl, index)">
                            <span class="title">{{ nl.name }}</span>
                        </div>
                        <div class="dot" :style="
                'left:' +
                nav.index * parseInt(100 / nav.list.length) +
                '%;width:' +
                parseInt(100 / nav.list.length) +
                '%'
              ">
                            <p class="line"></p>
                        </div>
                    </div>
                </div>

                <div class="body">

                    <div class="local" :style="'left:' + -nav.index * 100 + '%;'">
                        <div class="left">

                            <el-popover placement="top" width="230" v-model="group.showAdd">
                                <p style="width: 100%;border-bottom: 1px solid #eee;line-height: 20px;padding-bottom: 10px;margin-bottom: 15px;">
                                    添加分组
                                </p>
                                <el-input v-model="group.name" maxlength="10" show-word-limit></el-input>
                                <div style="text-align: right; margin: 0; padding-top: 15px">
                                    <el-button size="mini" type="text" @click="group.showAdd = false">取 消</el-button>
                                    <el-button type="primary" size="mini" @click="confirmAddGroupItem" style="margin-left: 20px">确 定
                                    </el-button>
                                </div>
                                <el-button slot="reference" class="addGroupBtn" size="small">+ 添加分组</el-button>
                            </el-popover>

                            <ul v-if="group.list!==null" class="imgGroupList">

                                <li v-for="(gl, glIndex) in group.list" :key="gl.id" :class="gl.active + ' ' + gl.type" @click.stop="chooseThisGroupItem(gl, glIndex)" class="imgGroupItem">
                                    <div class="left">
                                        <span class="title">{{ gl.groupName }}</span>
                                        <span class="tag" v-if="gl.tag">{{ gl.tag }}</span>
                                    </div>
                                    <div class="right" :class="gl.type">
                                        <span class="total">{{ gl.total }}</span>
                                        <div class="btns" v-if="gl.type === 'user'">
                                            <el-popover placement="top" width="230" trigger="click" :ref="'editImgGroup'+glIndex">
                                                <p style=" width: 100%;border-bottom: 1px solid #eee;line-height: 20px;padding-bottom: 10px;margin-bottom: 15px;">
                                                    修改分组
                                                </p>
                                                <el-input v-model="group.name" maxlength="10" show-word-limit></el-input>
                                                <div style=" text-align: right;margin: 0;padding-top: 15px;">
                                                    <el-button size="mini" type="text" @click="closeEditImgGroupWrapper(glIndex,glIndex)">取 消
                                                    </el-button>
                                                    <!--@click="group.showEdit = false"-->
                                                    <el-button type="primary" size="mini" @click="confirmEditGroupItem(glIndex,glIndex)" style="margin-left: 20px">确 定</el-button>
                                                </div>
                                                <el-button slot="reference" type="text" size="mini" @click="editThisGroupItem(gl,glIndex)">编辑
                                                </el-button>
                                                <!-- group.name = gl.name   v-model="group.showEdit" -->
                                            </el-popover>

                                            <i>|</i>
                                            <el-button type="text" size="mini" @click="delThisGroupItem(gl)">删除</el-button>
                                        </div>
                                    </div>
                                </li>
                            </ul>

                        </div>
                        <div class="right" v-if="
                group.list &&
                group.listIndex >= 0 &&
                group.list[group.listIndex]
              ">
                            <div class="head">
                                <div class="left">
                                    <el-upload :action="action" :headers="headers" :multiple="false" :auto-upload="true" :show-file-list="false" :before-upload="uploadImgBeforeUpload" :on-error="uploadImgError" :on-success="uploadImgSuccess" accept="image/jpeg,image/png">
                                        <el-button type="primary" size="small" class="addImgBtn">+ 添加图片</el-button>
                                    </el-upload>
                                    <span class="tips">大小不要超过10M</span>
                                    <el-popover placement="top-start" width="220" trigger="hover" content="大小不要超过10M, 支持图片类型gif, jpg, png, jpeg">
                                        <span class="el-icon-question" slot="reference" style="opacity: 0.6"></span>
                                    </el-popover>
                                </div>
                                <div class="right">
                                    <!-- <el-date-picker v-model="group.search.time" class="datetimerange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="searchImgByTimeChange">
                                    </el-date-picker> -->
                                </div>
                            </div>
                            <div class="body scrollbar">
                                <!-- <ul v-if="group.list[group.listIndex].imgs.length>0">
                    <li v-for="(gli, gliIndex) in group.list[group.listIndex].imgs" :key="gli.id" > -->
                                <ul v-if="group.imgs.length > 0">
                                    <li v-for="(gli, gliIndex) in group.imgs" :key="gli.id">
                                        <div class="img" @click="chooseThisImg(gliIndex)" :class="gli.active">
                                            <img :src="gli.imagePath" :alt="gli.name" :class="(gli.width>gli.height)?'width100':(gli.width<gli.height)?'height100':''" />
                                            <i class="el-icon-error delImg" @click="delImageById(gli)"></i>
                                            <span class="size">{{ gli.width }} X {{ gli.height }}</span>
                                            <span class="choose" v-if="gli.active">
                                                <i class="el-icon-success"></i>
                                            </span>
                                        </div>
                                        <p class="name">{{ gli.name }}</p>
                                    </li>
                                </ul>
                            </div>
                            <div class="foot">
                                <div class="left">
                                    <el-button type="default" class="delImgBtn" size="small">删除选中({{
                      group.list[group.listIndex].delImg.length
                    }})</el-button>
                                </div>
                                <div class="right">
                                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="
                      group.list[group.listIndex].pages.currentPage
                    " :page-sizes="group.list[group.listIndex].pages.pageSizes" :page-size="group.list[group.listIndex].pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="group.list[group.listIndex].pages.total">
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="net" :style="
              'left:' +
              (nav.index == 0 ? 1 : nav.index == 1 ? 0 : -1) * 100 +
              '%;'
            ">
                        <div class="extract">
                            <div class="left">图片地址：</div>
                            <div class="right">
                                <el-input placeholder="请在此处粘贴图片地址" v-model="networkPicture" class="input-with-select" style="width: 500px">
                                    <el-button slot="append" type="primary" @click="doExtractHandle">提取图片</el-button>
                                </el-input>
                                <p class="tips">
                                    需要http(s)://.........大小不要超过10M,支持图片类型gif,jpg,png,jpeg
                                </p>
                            </div>
                        </div>

                    </div>

                    <div class="systemIcon" :style="
              'left:' +
              (nav.index == 0 ? 2 : nav.index == 1 ? 1 : 0) * 100 +
              '%;'
            ">
                        <systemIconList></systemIconList>
                    </div>

                </div>

                <div class="foot">
                    <el-button type="default" @click="closeThisWindow">取 消</el-button>
                    <el-button type="primary" class="confirm" @click="chooseAfterConfirm">确 定</el-button>
                </div>

            </div>
        </div>
    </transition>
</template>

<script>
import { mapState } from "vuex";
import Bus from "@/utils/bus";
import headApi from "@/utils/hade";
import { getToken } from "@/utils/auth";
import systemIconList from "./Icon";
import backTopIconImg from "@/static/images/backTop.png";
import backTopIconImg2 from "@/static/images/backTop2.png";
import backTopIconImg3 from "@/static/images/backTop3.png";
import backTopIconImg4 from "@/static/images/backTop4.png";
import backTopIconImg5 from "@/static/images/backTop5.png";
export default {
    name: "vlonChooseImage",
    data() {
        return {
            loading: false,
            pageTitle: "选择图片",
            action: "/appImageList/uploadToAliOss",

            headers: {
                Authorization: "Bearer " + getToken(),
            },

            backTopIconImg,
            backTopIconImg2,
            backTopIconImg3,
            backTopIconImg4,
            backTopIconImg5,
            showChooseImgWrapper: false,
            sourceData: null, //打开弹窗携带的参数
            nav: {
                index: 0,
                list: [
                    {
                        id: 1,
                        name: "本地图片",
                        active: "active",
                    },
                    {
                        id: 2,
                        name: "网络图片",
                        active: "",
                    },
                    {
                        id: 3,
                        name: "系统图标",
                        active: "",
                    },
                ],
            },
            networkPicture: "", //网络图片地址
            group: {
                showAdd: false,
                showEdit: false,
                id: "", //当前编辑的分组的ID, 或当前选中的，高亮的分组的ID
                name: "", //当前新增或编辑的分组的名称
                listIndex: 0, //当前选中的图片分组在列表中的索引
                imgs: [], //当前被选中的图片分组中的图片的列表数据
                search: {
                    time: ["", ""],
                },
                current: {
                    //当前选中项
                    listIndex: 0, //list在group中的索引，即图片分组的索引，指定是哪个分组
                    imgsIndex: 0, //图片集合中的索引, 即图片自己在列表中的索引
                    id: "", //图片id
                    url: "", //图片网址
                    name: "", //图片名称
                },

                list: null,
                newList: [
                    {
                        id: 1,
                        groupName: "全部",
                        tag: "",
                        total: 6,
                        active: "active",
                        type: "sys",
                        delImg: [], //删除选中的图片的集合
                        imgs: [],
                        pages: {
                            currentPage: 1,
                            total: 0,
                            pageSize: 10,
                            pageSizes: [10, 20, 30],
                        },
                    },
                    {
                        id: 2,
                        groupName: "默认分组",
                        tag: "",
                        total: 0,
                        active: "",
                        type: "sys",
                        delImg: [], //删除选中的图片的集合
                        imgs: [],
                        pages: {
                            currentPage: 1,
                            total: 0,
                            pageSize: 10,
                            pageSizes: [10, 20, 30],
                        },
                    },
                    {
                        id: 3,
                        groupName: "商品助手",
                        tag: "系统",
                        total: 0,
                        active: "",
                        type: "sys",
                        delImg: [], //删除选中的图片的集合
                        imgs: [],
                        pages: {
                            currentPage: 1,
                            total: 0,
                            pageSize: 10,
                            pageSizes: [10, 20, 30],
                        },
                    },
                    {
                        id: 4,
                        groupName: "评价助手",
                        tag: "系统",
                        total: 0,
                        active: "",
                        type: "sys",
                        delImg: [], //删除选中的图片的集合
                        imgs: [],
                        pages: {
                            currentPage: 1,
                            total: 0,
                            pageSize: 10,
                            pageSizes: [10, 20, 30],
                        },
                    },
                ],
            },
        };
    },
    props: [],
    components: {
        systemIconList,
    },
    created() {},
    mounted() {
        this.$nextTick(() => {
            Bus.$off("openChooseImgGroup");
            Bus.$on("openChooseImgGroup", (params) => {
                // //console.log("已接收到打开选择跳转链接打开弹窗的要求",params);
                if (
                    params.ename == "carouseImgGroup" ||
                    params.ename == "singleImage" ||
                    params.ename == "quillEditorChooseImg" ||
                    params.ename == "vueTinymceChooseImage" ||
                    params.ename == "chooseSingleImg" ||
                    params.ename == "chooseImage" ||
                    params.ename == "imgGroupChoose" ||
                    params.ename == "bottomMenuImage" ||
                    params.ename == "bottomMenuImageActive" ||
                    params.ename == "floatBtnEventIsqrcode"
                ) {
                    //若是图片组选图片，则不显示图标选项
                    this.nav.list = [
                        {
                            id: 1,
                            name: "本地图片",
                            active: "active",
                        },
                        {
                            id: 2,
                            name: "网络图片",
                            active: "",
                        },
                    ];
                    this.nav.index = 0;
                    this.pageTitle = "选择图片";
                } else if (
                    params.ename == "titleIcon" ||
                    params.ename == "headLeftIcon" ||
                    params.ename == "btnIcon" ||
                    params.ename == "editIcon" ||
                    params.ename == "seeIcon" ||
                    params.ename == "delIcon" ||
                    params.ename == "subTitleIcon" ||
                    params.ename == "moreIcon" ||
                    params.ename == "chooseSingleIcon" ||
                    params.ename == "chooseIcon" ||
                    params.ename == "leftIcon" ||
                    params.ename == "rightIcon" ||
                    params.ename == "backTopIcon" ||
                    params.ename == "buttonList" ||
                    params.ename == "bottomMenuIcon" ||
                    params.ename == "dataPageFloatBtnIcon1" ||
                    params.ename == "dataPageFloatBtnIcon2" ||
                    params.ename == "addNewComponentChooseIcon" ||
                    params.ename == "listNavGroup"
                ) {
                    if (params.onlyIcon) {
                        this.nav.list = [
                            // { id: 1, name: "本地图片", active: "" },
                            // { id: 2, name: "网络图片", active: "" },
                            {
                                id: 3,
                                name: "系统图标",
                                active: "active",
                            },
                        ];
                        this.nav.index = 2;
                        this.pageTitle = "选择图标";
                    } else {
                        this.nav.list = [
                            {
                                id: 1,
                                name: "本地图片",
                                active: "",
                            },
                            {
                                id: 2,
                                name: "网络图片",
                                active: "",
                            },
                            {
                                id: 3,
                                name: "系统图标",
                                active: "active",
                            },
                        ];
                        this.nav.index = 2;
                    }
                }
                this.showChooseImgWrapper = true;
                this.sourceData = JSON.stringify(params);
                //编辑时，回写选中状态
                if (params.imgUrl) {
                    //遍历回写选中
                }
            });

            this.getImageGroups();
        });
    },
    methods: {
        //获取图片分组
        getImageGroups() {
            if (getToken()) {
                this.loading = true;
                this.axios
                    .post(
                        `${headApi}/appImageGroup/list`,
                        {},
                        {
                            headers: {
                                Authorization: "Bearer " + getToken(),
                            },
                        }
                    )
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            //console.log(res);
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                if (data && data.length > 0) {
                                    this.group.list = [];
                                    data.forEach((item, index) => {
                                        item.tag = "";
                                        item.total = 0;
                                        item.active =
                                            index === data.length - 1
                                                ? "active"
                                                : "";
                                        item.type = "user";
                                        item.delImg = [];
                                        item.imgs = [];
                                        item.pages = {
                                            currentPage: 1,
                                            total: 0,
                                            pageSize: 10,
                                            pageSizes: [10, 20, 30],
                                        };
                                    });
                                    this.group.list = new Array();
                                    this.group.list = data;
                                    this.group.listIndex = 0;
                                    this.group.id = data[0].id;
                                    // this.group.imgs = //获取当前被选中的分组下的图片列表
                                    this.getImageListByImgGroupId();
                                    this.getImageGroupsTotal();
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(4, err);
                        this.loading = false;
                    });
            }
        },
        //获取图片分组中，各分组中图片的数量
        getImageGroupsTotal() {
            this.axios
                .get(`/appImageGroup/getImagesNumber`, {
                    headers: {
                        Authorization: "Bearer " + getToken(),
                    },
                })
                .then((res) => {
                    let { code, data, msg } = res.data;
                    if (code == 200) {
                        this.group.list.forEach((item) => {
                            data.forEach((row) => {
                                if (item.id == row.id) {
                                    item.total = row.number;
                                }
                            });
                        });
                    } else {
                        this.$message.warning(msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        }, //添加分组
        createNewImageGroups(groupName, sort, cb) {
            if (getToken()) {
                this.loading = true;
                this.axios
                    .post(
                        `${headApi}/appImageGroup`,
                        {
                            groupName: groupName,
                            sort: sort,
                        },
                        {
                            headers: {
                                Authorization: "Bearer " + getToken(),
                            },
                        }
                    )
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            //console.log(4,res);
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                this.$message.success("保存成功");
                                if (cb) {
                                    cb();
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loading = false;
                    });
            }
        },

        //点击 左侧 当前图片分组，在右侧主区域中，显示当前分组内容的图片列表，若内容为空，则显示暂无数据，提示去添加
        chooseThisGroupItem(row, index) {
            if (this.group.list && this.group.list.length > 0) {
                if (
                    index !== null &&
                    index !== undefined &&
                    this.group.list[index]
                ) {
                    if (this.group.list[index].active === "active") {
                        return false;
                    }
                    this.group.list.forEach((item) => {
                        item.active = "";
                    });
                    this.group.list[index].active = "active";
                    this.group.id = row.id;
                    this.group.listIndex = index;
                    //查询当前分组下的图片列表==================================

                    // this.group.imgs = //获取当前被选中的分组下的图片列表
                    this.getImageListByImgGroupId();
                }
            }
        },

        //点击 左侧 添加分组，在弹窗中，点击确定的事件
        confirmAddGroupItem() {
            if (!this.group.name) {
                this.$message.warning("请输入分组名称");
                return false;
            }
            this.createNewImageGroups(
                this.group.name,
                this.group.list.length,
                () => {
                    this.group.showAdd = false;
                    this.getImageGroups();
                    setTimeout(() => {
                        this.group.id = "";
                        this.group.name = "";
                    }, 500);
                }
            );
        },
        //点击 左侧 编辑分组，在弹窗中，点击确定的事件
        confirmEditGroupItem(glIndex) {
            // this.group.list[glIndex].name = this.group.name;
            this.editImageGroups(() => {
                this.group.showEdit = false;
                this.closeEditImgGroupWrapper(glIndex);
                this.getImageGroups();
                setTimeout(() => {
                    this.group.name = "";
                    this.group.id = "";
                }, 500);
            });
        },

        //编辑分组
        editImageGroups(cb) {
            if (getToken()) {
                this.loading = true;

                this.axios
                    .put(
                        `${headApi}/appImageGroup`,
                        {
                            groupName: this.group.name,
                            id: this.group.id,
                        },
                        {
                            headers: {
                                Authorization: "Bearer " + getToken(),
                            },
                        }
                    )
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            //console.log(4,res);
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                this.$message.success("保存成功");
                                if (cb) {
                                    cb();
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loading = false;
                    });
            }
        },

        //点击 左侧 编辑 当前分组
        editThisGroupItem(row, index) {
            // //console.log(row);
            this.group.id = row.id;
            this.group.name = row.groupName;
            // //console.log(this.$refs['editImgGroup'+index])
        },
        //关闭掉，当前编辑图片分组的弹窗
        closeEditImgGroupWrapper(index) {
            this.$refs["editImgGroup" + index][0].doClose();
            this.group.showEdit = false;
            setTimeout(() => {
                this.group.name = "";
                this.group.id = "";
            }, 500);
        },
        //点击 左侧 删除 当前分组
        delThisGroupItem(row) {
            this.$confirm("删除后不可恢复, 确定删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    // this.group.list = this.group.list.filter((item) => item.id != row.id);
                    //执行删除的方法
                    this.delGroupImage(row);
                })
                .catch(() => {});
        },
        //删除图片的分组
        delGroupImage(row) {
            if (getToken()) {
                this.loading = true;
                this.axios
                    .delete(`${headApi}/appImageGroup/${row.id}`, {
                        headers: {
                            Authorization: "Bearer " + getToken(),
                        },
                    })
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            //console.log(4,res);
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                this.$message.success("删除成功");
                                this.getImageGroups();
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loading = false;
                    });
            }
        },

        //点击 切换 本地图片 和 网络图片
        chooseThisNavItem(row, index) {
            // //console.log("chooseThisNavItem",row, index);
            let list = this.nav.list;
            if (list[index].active === "active") {
                return false;
            }
            list.forEach((item) => {
                item.active = "";
            });
            list[index].active = "active";
            this.nav.index = index;
            this.nav.list = list;
        },
        //改变一页显示多少条数据
        handleSizeChange(size) {
            this.group.list[this.group.listIndex].pages.pageSize = size;
            this.getImageListByImgGroupId();
        },
        //翻页
        handleCurrentChange(page) {
            this.group.list[this.group.listIndex].pages.currentPage = page;
            this.getImageListByImgGroupId();
        },
        //点击 关闭 按钮，关掉当前选择图片的弹窗
        closeThisWindow() {
            this.showChooseImgWrapper = false;
            setTimeout(() => {
                this.nav.index = 0;
                this.nav.list.forEach((item) => {
                    item.active = "";
                });
                this.nav.list[0].active = "active";
                this.group.search.time = ["", ""];
                this.group.listIndex = 0;
                this.group.list.forEach((item) => {
                    item.active = "";
                    item.delImg = [];
                    item.pages.currentPage = 1;
                    item.pages.pageSize = 10;
                });
                this.group.list[0].active = "active";
            }, 300);
        },
        //在图片列表中，点击选中图片
        chooseThisImg(index) {
            this.group.current.listIndex = this.group.listIndex;

            // this.group.list[this.group.listIndex].imgs.forEach((item, idx) => {
            this.group.imgs.forEach((item, idx) => {
                if (idx == index) {
                    if (item.active == "") {
                        this.group.current.imgsIndex = index;
                        this.group.current.id = item.id;
                        this.group.current.url = item.imagePath;
                        this.group.current.name = item.name;
                        item.active = "active";
                    } else if (item.active == "active") {
                        item.active = "";
                        this.group.current.imgsIndex = 0;
                        this.group.current.id = "";
                        this.group.current.url = "";
                        this.group.current.name = "";
                    }
                } else {
                    item.active = "";
                }
            });
        },
        //选择图片后点击确认按钮
        chooseAfterConfirm() {
            if (this.group.current.url != "") {
                let d = JSON.parse(this.sourceData);
                if (d.ename == "chooseImage") {
                    Bus.$emit(`chooseImageAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "carouseImgGroup") {
                    Bus.$emit(`chooseCarouseImgGroupAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "backTopIcon") {
                    Bus.$emit(`choosebackTopIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "leftIcon") {
                    Bus.$emit(`chooseLeftIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "rightIcon") {
                    Bus.$emit(`chooseRightIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "titleIcon") {
                    Bus.$emit(`chooseTitleIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "subTitleIcon") {
                    Bus.$emit(`chooseSubTitleIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "moreIcon") {
                    Bus.$emit(`chooseMoreIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "quillEditorChooseImg") {
                    Bus.$emit(`chooseImgAfterToEditor${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "vueTinymceChooseImage") {
                    Bus.$emit(`chooseImgAfterToVueTinymceEditor`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "chooseSingleImg") {
                    Bus.$emit(`chooseSingleImgAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "chooseSingleIcon") {
                    Bus.$emit(`chooseSingleImgAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "bgImg") {
                    Bus.$emit(`chooseSingleImgAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "imgGroupChoose") {
                    Bus.$emit(`imgGroupChooseAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "buttonList") {
                    Bus.$emit(`buttonListChooseAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "listNavGroup") {
                    Bus.$emit(`listNavChooseImgAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "floatBtnEventIsqrcode") {
                    Bus.$emit(`floatBtnEventIsqrcodeAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "bottomMenuIcon") {
                    //console.log(4,d);
                    Bus.$emit(`bottomMenuIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "bottomMenuImage") {
                    Bus.$emit(`bottomMenuImageAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "bottomMenuImageActive") {
                    Bus.$emit(`bottomMenuImageActiveAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "addNewComponentChooseIcon") {
                    Bus.$emit(`addNewComponentChooseIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "headLeftIcon") {
                    Bus.$emit(`chooseHeadLeftIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "editIcon") {
                    Bus.$emit(`chooseEditIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "seeIcon") {
                    Bus.$emit(`chooseSeeIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "delIcon") {
                    Bus.$emit(`chooseDelIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "btnIcon") {
                    Bus.$emit(`chooseBtnIconAfter${d.controlid}`, {
                        url: this.group.current.url,
                    });
                } else if (d.ename == "dataPageFloatBtnIcon1") {
                    Bus.$emit(
                        `chooseDataPageFloatBtnIcon1After${d.controlid}`,
                        {
                            url: this.group.current.url,
                        }
                    );
                } else if (d.ename == "dataPageFloatBtnIcon2") {
                    Bus.$emit(
                        `chooseDataPageFloatBtnIcon2After${d.controlid}`,
                        {
                            url: this.group.current.url,
                        }
                    );
                } else {
                    Bus.$emit(
                        `updateChooseImgData__${d.controlid}__${d.controlsIndex}__${d.rightIndex}__${d.catalogIndex}`,
                        {
                            url: this.group.current.url,
                            params: JSON.parse(this.sourceData),
                        }
                    );
                }
            }
            this.closeThisWindow();
        },
        //点击“提取图片”按钮
        doExtractHandle() {
            if (this.networkPicture) {
                this.group.current.url = this.networkPicture;
                this.chooseAfterConfirm();
                this.networkPicture = "";
            } else {
                this.$message.warning("请填写网络图片地址");
            }
        },
        //点击选择图片
        uploadImgBeforeUpload(file) {
            // //console.log(file);
            let fileName = file.name,
                fileSize = file.size,
                fileType = file.type;
            if (fileName.length > 35) {
                this.$message.warning("图片名称不能超过30个字");
                return false;
            }
            if (
                !/\/png$/.test(fileType) &&
                !/\/jpg$/.test(fileType) &&
                !/\/jpeg$/.test(fileType) &&
                !/\/gif$/.test(fileType)
            ) {
                this.$message.warning("图片格式有误，请重新上传");
                return false;
            }
            if (!fileSize) {
                this.$message.warning("图片有误，请重新上传");
                return false;
            }
            //图片大小限制在10MB以内
            if (fileSize > 1024 * 1024 * 10) {
                this.$message.warning("图片不能超过10MB");
                return false;
            }
            this.loading = true;
        },
        //为某个图片分组上传图片
        uploadImgSuccess(response, file, fileList) {
            //console.log(4,response, file, fileList);
            if (response.data) {
                const reader = new FileReader();
                reader.readAsDataURL(file.raw);
                reader.onload = () => {
                    let img = new Image();
                    img.src = reader.result;
                    img.onload = (e) => {
                        let width = e.path[0].width;
                        let height = e.path[0].height;
                        let imagePath = response.data;
                        let imageGroupId = this.group.id;
                        let imageName = file.name;
                        this.saveImageAfterUpload(
                            width,
                            height,
                            imagePath,
                            imageGroupId,
                            imageName
                        );
                    };
                };
            } else {
                this.loading = false;
            }
        },
        //图片上传失败
        uploadImgError(err, file, fileList) {
            this.$message.warning("图片上传失败");
            //console.log(4,err, file, fileList);
            this.loading = false;
        },
        //图片上传成功后，保存到数据库
        saveImageAfterUpload(
            width,
            height,
            imagePath,
            imageGroupId,
            imageName
        ) {
            if (getToken()) {
                this.axios
                    .post(
                        `${headApi}/appImageList`,
                        {
                            width,
                            height,
                            imagePath,
                            imageGroupId,
                            imageName,
                        },
                        {
                            headers: {
                                Authorization: "Bearer " + getToken(),
                            },
                        }
                    )
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            //console.log(4,res);
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                this.$message.success("上传成功");
                                this.getImageGroups();

                                this.group.imgs.push({
                                    id: new Date().getTime(),
                                    name: imageName,
                                    url: imagePath,
                                    width: width,
                                    height: height,
                                    active: "",
                                });
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loading = false;
                    });
            }
        },
        //通过图片分组ID，查询图片列表
        getImageListByImgGroupId() {
            if (getToken()) {
                this.loading = true;
                let index = this.group.listIndex;
                let params = new Object();
                params.imageGroupId = this.group.id;
                params.pageNum = this.group.list[index].pages.currentPage;
                params.pageSize = this.group.list[index].pages.pageSize;
                this.axios
                    .post(`${headApi}/appImageList/paging`, params, {
                        headers: {
                            Authorization: "Bearer " + getToken(),
                        },
                    })
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                if (data && data.list && data.list.length > 0) {
                                    data.list.forEach((item, index) => {
                                        item.active = "";
                                    });
                                    this.group.imgs = data.list; //获取当前被选中的分组下的图片列表
                                    this.group.list[index].pages.total =
                                        data.total;
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loading = false;
                    });
            }
        },
        //删除图片
        delImageById(row) {
            this.$confirm("删除后不可恢复, 确定删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    //执行删除的方法
                    this.delImageByIdHandle(row);
                })
                .catch(() => {});
        },
        delImageByIdHandle(row) {
            if (getToken()) {
                this.loading = true;
                this.axios
                    .delete(`${headApi}/appImageList/${row.id}`, {
                        headers: {
                            Authorization: "Bearer " + getToken(),
                        },
                    })
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            //console.log(4,res);
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                this.$message.success("删除成功");
                                this.group.imgs = this.group.imgs.filter(
                                    (item) => item.id != row.id
                                );
                                this.group.list[this.group.listIndex].pages
                                    .total--;
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loading = false;
                    });
            }
        },
        //通过时间筛选，查询某个分组下的图片
        searchImgByTimeChange() {
            this.getImageListByImgGroupId();
        },
    },
    computed: mapState(["decorate"]),
    watch: {
        "group.showAdd": function (v) {
            if (v) {
                this.group.name = "";
            }
        },
    },
};
</script>

<style scoped lang="scss">
.vlonChooseImage {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1001;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    .box {
        width: 1000px;
        height: 610px;
        background-color: #fff;
        border-radius: 3px;

        & > .head {
            display: flex;
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #eee;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            box-sizing: border-box;

            & > .left {
                font-size: 14px;
                color: #666;
            }

            & > .right {
                display: flex;
                justify-content: flex-end;

                .close {
                    border: none;
                    background-color: transparent;
                    width: 40px;
                    height: 100%;

                    .el-icon-close {
                        font-size: 18px;
                    }
                }
            }
        }

        .headNav {
            width: 100%;
            padding: 0 20%;
            height: 50px;
            border-bottom: 1px solid #eee;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;

            .list {
                width: 100%;
                height: 100%;
                display: flex;
                position: relative;
                align-items: center;

                .li {
                    display: flex;
                    flex: 1;
                    height: 100%;
                    cursor: pointer;
                    justify-content: center;

                    .title {
                        height: 100%;
                        display: flex;
                        align-items: center;
                    }

                    &.active {
                        color: #0079fe;
                    }
                }

                .dot {
                    position: absolute;
                    left: 0;
                    bottom: -1px;
                    z-index: 2;
                    height: 1px;
                    display: flex;
                    justify-content: center;
                    transition: all 0.3s;

                    .line {
                        width: 50%;
                        height: 1px;
                        background-color: #0079fe;
                    }
                }
            }
        }

        & > .body {
            display: flex;
            width: 100%;
            height: calc(100% - 140px);
            position: relative;
            overflow: hidden;

            .local {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
                width: 100%;
                height: 100%;
                transition: all 0.3s;
                display: flex;

                & > .left {
                    width: 200px;
                    height: 100%;
                    border-right: 1px solid #eee;
                    box-sizing: border-box;
                    font-size: 12px;

                    .addGroupBtn {
                        margin: 20px;
                        width: calc(100% - 40px);
                    }

                    .imgGroupList {
                        .imgGroupItem {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 0 20px;
                            height: 40px;
                            width: 100%;
                            box-sizing: border-box;
                            cursor: pointer;

                            &.active,
                            &:hover {
                                background-color: #f0faff;
                                color: #0079fe;
                            }

                            & > .left {
                                display: flex;
                                align-items: center;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                max-width: 120px;

                                .tag {
                                    border: 1px solid #0079fe;
                                    margin-left: 5px;
                                    color: #0079fe;
                                    border-radius: 3px;
                                    padding: 0 2px;
                                }
                            }

                            & > .right {
                                display: flex;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;

                                .total {
                                    display: flex;
                                }

                                .btns {
                                    display: none;
                                    align-items: center;

                                    .el-button {
                                        padding: 0;
                                        margin: 0;
                                        font-size: 12px;
                                    }

                                    & > i {
                                        margin: 0 2px;
                                        position: relative;
                                        top: -1px;
                                    }
                                }
                            }

                            &.user:hover {
                                & > .right {
                                    .total {
                                        display: none;
                                    }

                                    .btns {
                                        display: flex;
                                    }
                                }
                            }
                        }
                    }
                }

                & > .right {
                    font-size: 12px;
                    display: flex;
                    width: calc(100% - 200px);
                    flex-direction: column;
                    height: 100%;

                    & > .head {
                        width: 100%;
                        height: 50px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        & > .left {
                            height: 100%;
                            display: flex;
                            align-items: center;

                            .addImgBtn {
                                margin-left: 15px;
                                margin-right: 15px;
                            }

                            .tips {
                                color: #777;
                                margin-right: 5px;
                            }
                        }

                        & > .right {
                            .datetimerange {
                                margin-right: 15px;
                                width: 370px;
                            }
                        }
                    }

                    & > .body {
                        height: calc(100% - 100px);
                        overflow-x: hidden;
                        overflow-y: auto;

                        ul {
                            display: flex;
                            flex-wrap: wrap;
                            padding-left: 15px;
                            padding-top: 15px;

                            li {
                                width: 140px;
                                margin-right: 15px;
                                margin-bottom: 10px;

                                .img {
                                    width: 140px;
                                    height: 140px;
                                    position: relative;
                                    box-sizing: border-box;
                                    border: 1px solid #f5f5f5;
                                    cursor: pointer;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;

                                    img {
                                        width: 140px;
                                        height: 140px;
                                        display: block;
                                        border-radius: 2px;
                                    }

                                    .width100 {
                                        width: 100%;
                                        height: auto;
                                        max-height: 140px;
                                    }

                                    .height100 {
                                        width: auto;
                                        height: 100%;
                                        max-width: 140px;
                                    }

                                    .delImg {
                                        position: absolute;
                                        width: 20px;
                                        height: 20px;
                                        top: -10px;
                                        right: -10px;
                                        z-index: 2;
                                        font-size: 18px;
                                        display: none;
                                        align-items: center;
                                        justify-content: center;
                                        opacity: 0.4;
                                    }

                                    .size {
                                        position: absolute;
                                        left: 0;
                                        bottom: 0;
                                        z-index: 2;
                                        width: 100%;
                                        height: 20px;
                                        background-color: rgba(0, 0, 0, 0.8);
                                        color: #fff;
                                        display: none;
                                        align-items: center;
                                        justify-content: center;
                                    }

                                    .choose {
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        z-index: 2;
                                        width: 100%;
                                        height: 100%;
                                        background-color: rgba(0, 0, 0, 0.8);
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        border-radius: 2px;

                                        i {
                                            color: #0079fe;
                                            font-size: 26px;
                                        }
                                    }

                                    &:hover {
                                        .delImg,
                                        .size {
                                            display: flex;
                                        }
                                    }

                                    &.active {
                                        .choose {
                                            display: flex;
                                        }

                                        &:hover {
                                            .delImg,
                                            .size {
                                                display: none;
                                            }
                                        }
                                    }
                                }

                                .name {
                                    width: 100%;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                }
                            }
                        }
                    }

                    & > .foot {
                        width: 100%;
                        height: 50px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        & > .left {
                            .delImgBtn {
                                margin-left: 15px;
                            }
                        }

                        & > .right {
                            .el-pagination {
                                margin-right: 15px;
                            }
                        }
                    }
                }
            }

            .net {
                position: absolute;
                left: 100%;
                top: 0;
                z-index: 1;
                width: 100%;
                transition: all 0.3s;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .extract {
                    display: flex;

                    .left {
                        height: 36px;
                        display: flex;
                        font-size: 12px;
                        align-items: center;
                    }

                    .right {
                        p.tips {
                            font-size: 12px;
                            color: #888;
                            line-height: 30px;
                        }
                    }
                }
            }

            .systemIcon {
                position: absolute;
                left: 200%;
                top: 0;
                z-index: 1;
                width: 100%;
                transition: all 0.3s;
                height: 100%;
                display: flex;
            }
        }

        & > .foot {
            display: flex;
            width: 100%;
            height: 50px;
            border-top: 1px solid #eee;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;

            .confirm {
                margin-left: 50px;
            }
        }
    }
}
</style>
